<template>
    <div class="detail">
        <main class="content_box wrap">
        <div class="articleContent" >
            <div class="articlDetail" v-html="newsDetail.content">
            </div>
            <div class="share"></div>
            <section>
                <div class="categoryTitle">
                        <h3 class="heading">
                            Latest Articles
                        </h3>
                    </div>
                    <div class="category_content">
                        <article class="articleBox" v-for="(item,index) in typeArticle" :key="item.id">
                            <router-link to="/detail" class="imgBox" @click="toDeatil(item)" :title="item.newsTitle">
                                <div class="bgImg bgBox6 lazyloaded"
                                    data-bgset="https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg 450w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-300x200.jpg 300w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-750x500.jpg 750w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-768x512.jpg 768w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-150x100.jpg 150w, https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503.jpg 1000w"
                                    data-bgsrc="https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg"
                                    data-sizes="(max-width: 361px) 100vw, 361px"
                                    style="background-image: url(&quot;https://factavenue.net/wp-content/uploads/2024/09/shutterstock_1904756503-450x300.jpg&quot;);">
                                </div>
                            </router-link>
                            <div class="mask">
                                <div class="contentText">
                                    <div class="typeBtn">
                                        <a href="./category/index.html">
                                            FINESS
                                        </a>
                                    </div>
                                    <h2 class="titleText">
                                        <a href="./detail/index.html">
                                            Nature’s
                                            Gym: Unleashing the Power of
                                            Biophilia
                                            Workouts</a>
                                    </h2>
                                </div>

                            </div>
                        </article>
                    </div>
            </section>
        </div>
        <div class="aside">
            <section class="relatedPosts">
                <div class="categoryTitle">
                    <h2 class="heading">
                            Related Articles
                    </h2>
                </div>
                <article class="post subPosts" v-for="(item,index) in trendingArticles" :key="index">
                    <div class="media">
                        <router-link to="/" @click="toDeatil(item)" :title="item.newsTitle">
                                <div class="bgImg bgBox4 lazyloaded"
                                :data-bgset="`${item.imgUrl} 450w, ${item.imgUrl} 450w`"
                                        :data-bgsrc="item.imgUrl"
                                        :style="{'background-image':`url(${item.imgUrl})`}"
                                        data-sizes="(max-width: 135px) 100vw, 135px"
                                    >
                                </div>
                            </router-link>
                    </div>
                    <div class="postsText">
                            <h4 class="postsTitle">
                                <router-link to="/" @click="toDeatil(item)" >
                                        {{ item.newsTitle }}
                                    </router-link>
                            </h4>

                            <time class="postsDate" :datetime="item.publicTime">{{ item.publicTime }}</time>
                        </div>
                </article>
            

            </section>
            <div class="AFC">
                AFC广告
            </div>
        </div>
    </main>

    </div>
</template>

<script setup>
import { ref ,onMounted,inject } from 'vue'
import { useRoute, useRouter} from 'vue-router'
import { articleData } from '@/utils/common.js'

const route = useRoute()
const router = useRouter()
// 共享侧边栏
const trendingArticles = inject("trendingArticles")


const newsDetail = articleData[route.params.type].find(item =>{
    return item.id == route.params.id
})


// 同类文章
const typeArticle = articleData[route.params.type].filter(item =>{
    return item.id != route.params.id
})
console.log(typeArticle);


const toDeatil = (item) =>{
    let title = item.newsTitle.replaceAll(' ', '-')
    router.push(`/detail/${item.classfy}/${title}/${item.id}`)
}


</script>

<style lang="scss">
$text-color1:#1c1c1c;
$text-color2:#696575;
$text-color3:#45414b;

.detail{
    margin-top: 20px;
    .content_box{
    display: flex;
    justify-content: space-between;
    .articleContent{
        color: $text-color1;
        font-size: 18px;
        .articlDetail{
            h1.title{
            color: $text-color2;
            margin: 15px 0;
            font-size: 36px;
            line-height: 1.24;
            letter-spacing: -0.005em;
            font-weight: 500;
            line-height: 1.2;
        }
        .author{
            font-size: 12px;
            letter-spacing: 1px;
            .type{
                letter-spacing: 1.5px;
                font-weight: 700;
            }
        }
        img{
            margin: 20px 0;
            width: 100%;
            border-radius: 4px;
            min-width: 300px;
        }
        p{
            margin-bottom: 25px;
        }
        h2{
            font-size: 1.285em;
            color: $text-color3;
        }
        h3{
            font-size: 1.125em;
            color: $text-color3;
            margin: 27px 0 15px 0;
        }
        ul{
            margin: 28px 0 28px 35px;
            li{
                margin-bottom: 7px;
                list-style: disc !important; /* 使用实心点来表示列表项 */
                &::marker{
                }
            }
       
        }
        .subTitle{
            a{
                color: #336df4;
            }
        }
        }
       .category_content{
        display: flex;
        justify-content: space-between;
        .articleBox{
            overflow: hidden;
            position: relative;
            border-radius: 4px;
            .bgBox6{
                width: 190px;
                height: 150px;
        }
        .mask{
            left: 4px;
            .contentText{
                font-size: 12px;
            }
            .typeBtn{
                margin-bottom: 2px;
                a{
                    padding: 4px;
                }
            }
        }
        }
       
       }
    }
}
}
</style>